<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quality - ECharts</title>

<!-- 引入jquery.js -->
<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="static/js/echarts.min.js"></script>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style=" height: 400px;"></div>

	<script type="text/javascript">
	var worldMapContainer = document.getElementById('main');
	//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var resizeWorldMapContainer = function () {
        worldMapContainer.style.width = (window.innerWidth-20)+'px';
        worldMapContainer.style.height = (window.innerHeight-20)+'px';
        //worldMapContainer.style.width = container.clientWidth+'px';
        //worldMapContainer.style.height = container.clientHeight+'px';
    };
    //设置容器高宽
    resizeWorldMapContainer();
	var myChart = echarts.init(worldMapContainer);
		// 显示标题，图例和空的坐标轴
		var option = option = {
			    title : {
			        text: 'XK101质量问题统计(1H)',
			        //subtext: '纯属虚构',
			        //top:1,
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'horizontal',
			        bottom: 1,
			        //top:'bottom',
			        data: ['表面划痕','尺寸偏差','角度偏差']
			    },
			    series : [
			        {
			            name: '质量统计',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '50%'],
			            data:[
			                {value:20, name:'表面划痕'},
			                {value:50, name:'尺寸偏差'},
			                {value:30, name:'角度偏差'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
		myChart.setOption(option);
		window.onresize = myChart.resize;
		//用于使chart自适应高度和宽度
		/* window.onresize = function () {
		    //重置容器高宽
		    resizeWorldMapContainer();
		    myChart.resize();
		}; */
	</script>
</body>
</html>